import Score from './model/Score'
// import ScoreLayout from './layout/ScoreLayout'
// import scoreElement from './view/scoreElement'
import el from './utils/el'
import { loadText } from './utils/helpers'

import './appElement.css'

// import './test/testLexer'

// import jsonElement from './utils/jsonElement'
// import xmlElement from './utils/xmlElement'


// 定义默认加载的乐谱URL
const defaultUrl = 'scores/测试点.musje'

// 动态生成乐谱URLs数组
const scoresUrls = (function () {
  const fnames = [
    '001', '002', '003', '004', '005', '006', '007', '008', '009', '010',
    '011', '012', '013', '014', '015', '016', '017', '018', '019', '020',
   '021', '022', '023', '024', '025', '026', '027', '028', '029', '030',
   '031', '032', '033', '034', '035','铃儿响叮当',"小星星","白月光","欢乐颂","测试点","卡农"
  ]

  return fnames.map(fname => `scores/${fname}.musje`)
}())


// 导出默认的函数组件appElement
export default function appElement() {
  // 初始化数据对象，用于存储与url和分数相关的数据
  const data = el.setData({
    url: '', // URL地址，目前为空字符串
    scoreStr: '', // 分数的字符串表示，目前为空字符串

    // 定义一个名为score的属性，该属性没有直接访问的变量，而是通过getter方法来获取Score对象的实例
    score: {
      get() {
        // 试图根据this.scoreStr创建一个Score对象，如果失败，则创建一个空的Score对象，并记录错误信息
        let score
        try {
          score = new Score(this.scoreStr) // 尝试使用scoreStr初始化Score对象
          this.error = '' // 如果没有错误，重置错误信息
        } catch (e) {
          score = new Score() // 如果初始化失败，创建一个空的Score对象
          this.error = e // 记录错误信息
        }

        // 临时添加样式，用于Score对象
        score.addStyle(`
          score {
            width: 700px
          }
        `)

        return score // 返回最终的Score对象
      }
    },

    // 注释掉的scoreLayout属性，可能用于更复杂的布局处理
    // scoreLayout: { get() { return new ScoreLayout(this.score) } },

    // info属性的getter方法，返回score属性的值
    info: { get() { return this.score } },
    error: '', // 用于存储错误信息
    // scoreElement属性的getter方法，返回score的渲染结果
    scoreElement: { el() { return this.score.render() } },

    // scoreJsonElement: { el() { return jsonElement('score', this.score) } },
    // scoreLayoutJsonElement: {
    //   el() { return jsonElement('scoreLayout', this.scoreLayout) }
    // }
  })


  // 加载乐谱的函数
  const loadScore = url => {
    data.url = url
    loadText(url, txt => { data.scoreStr = txt })
  }

  // 创建主元素，包含乐谱的编辑、控制和显示区域
  const main = el.create('div', { style: 'width: 90%; margin: 15px' }, [
    el('h1', { style: 'font-size: 26px' }, ''),

    // 左侧区域，包含文本区域和控制按钮
    el('div', { style: 'width: 47%; float: left'}, [
      el('textarea', {
        style: 'width: 100%; height: 300px',
        value: data.$scoreStr
      }),

      // 乐谱选择按钮
      el('span', scoresUrls.map((url, i) => {
        return el('button', { click() { loadScore(url); data.url = url } }, url)
      })), ' ',

      // 播放控制按钮
      el('button', { click: () => data.score.play() }, '>'),
      el('button', { click: () => data.score.pause() }, '||'),
      el('button', { click: () => data.score.stop() }, '[]'),
      el('span', { style: 'padding: 3px; color: gray;' }, data.$url),

      // 错误信息显示
      el('pre', { style: 'color: #d53' }, data.$error),

      // 乐谱信息显示
      el('pre', {
        style: 'border: 1px solid #ccc; padding: 5px; width: 100%; background-color: #eee; white-space: pre-wrap'
      }, data.$info),

      // el('div', data.$scoreJsonElement)
    ]),

    // 右侧区域，主要用于显示乐谱
    el('div', { style: 'width: 47%; float: left; padding-left: 30px'}, [
      el('div', data.$scoreElement),
      // el('div', data.$scoreLayoutJsonElement)
    ])
  ])

  // 加载默认乐谱
  loadScore(defaultUrl)

  // 日志输出data对象，用于调试
  console.log("huoq ---appElement--data->", data)

  // 返回主元素
  return main
}
